<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :buttons="buttons"
    :cancleText="'关闭'" @handleCancle="handleCancle" class="version_model">
    <template v-slot:body>
      <div class="version_modelBox" id="version_modelBox">
        <div class="btnBox">
          <a-button class="addButton" type="primary" @click="saveVersion">
            保存当前版本
          </a-button>
          <a-button :style="{ 'margin-left': '8px' }" :disabled="tagBaseTables.selectedRowKeys.length != 2"
            @click="compareVersion">对比选中版本</a-button>
          <a-tooltip placement="right">
            <template #title>
              <span>选中两个版本进行对比</span>
            </template>
            <i class="iconfont icon-hint1"></i>
          </a-tooltip>
        </div>
        <treeTable :columns="columns.versionColumn" :dataSource="resData" :isSelect="true" :scroll="{ y: 200 }"
          ref="tagBaseTables" :isShowPagination="isShowPagination" :showCheckDelete="showCheckDelete">
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.ellipsis">
              <table-tool-tip :text="text" :column="column"></table-tool-tip>
            </template>
            <template v-if="column.dataIndex === 'remark'">
              <a-input class="tableInput" v-model:value="record.remark" placeholder="请输入" @blur="remarkChange(record)" />
            </template>
            <template v-if="column.dataIndex === 'oparation'">
              <a class="eidtRecords" @click="detailRecords(record.id)">查看详情</a>
              <a class="eidtRecords" @click="fetchContentVersionRestore(record.id)">恢复此版本</a>
              <a class="eidtRecords" @click="compareVersion1([0, record.id])">与当前版本对比</a>
              <a class="eidtRecords" @click="fetchContentVersionDelete([record.id])">删除</a>
            </template>
          </template>
          <template #otherOpration>
            <a-button :style="{ 'margin-left': '8px' }" @click="deleteSelectedAll">删除</a-button>
          </template>
        </treeTable>
      </div>
    </template>
  </base-modal>
  <versionComparison v-if="isVersionComparisonVisible" :isVisible="isVersionComparisonVisible" @handleOk="handleOkModel"
    @handleCancle="isVersionComparisonVisible = false" :VersionIds="VersionIds" :contentId="props.contentId">
  </versionComparison>
  <versionDetail v-if="isVersionDetailVisible" :isVisible="isVersionDetailVisible" @handleOk="handleOkModel"
    @handleCancle="isVersionDetailVisible = false" :versionId="versionId" :contentId="props.contentId"></versionDetail>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  defineComponent,
  createVNode,
  watch,
} from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import treeTable from "@/components/table/baseTable.vue";
import versionComparison from "./versionComparison.vue";
import versionDetail from "./versionDetail.vue";
import columns from "@/components/table/tableConfig/tableColumn/contentManageColumn";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { scrollType } from "@/type.d";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { dataSourceType, detailDataItemType } from "@/type";
import request from "@/api/index";
import { Modal, message } from "ant-design-vue";
//props
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  contentId: {
    type: Number,
    default: null,
  },
});
//emit
const emits = defineEmits(["handleOk", "handleCancle", 'fetchContentVersionRestore']);
const resData = ref<dataSourceType[]>([
  {
    versionCode: "版本号1",
    remark: "备注1",
  },
]);
//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "XL",
  title: "内容版本",
});
const getRecordValue = (key: number) => {
  // 1:编辑 2：发布 3：下线 4：提交审核 5：撤回审核 6：编辑后发布 7：编辑后提交审核
  return key == 1
    ? "编辑"
    : key == 2
      ? "发布"
      : key == 3
        ? "下线"
        : key == 4
          ? "提交审核"
          : key == 5
            ? "撤回审核"
            : key == 6
              ? "编辑后发布"
              : "编辑后提交审核";
};
const isShowPagination = ref<boolean>(true); // 是否需要配分页器
const showCheckDelete = true; // 是否需要分页器中的自定义
const isVersionComparisonVisible = ref<boolean>(false);
const isVersionDetailVisible = ref<boolean>(false);

let compareData = ref<dataSourceType[]>([]);
let VersionIds = ref<dataSourceType[]>([]);
let versionId = ref();

const tagBaseTables = ref<any>({
  selectedRowKeys: [],
});
const formState = ref<dataSourceType>({});
const remark = ref<string>("");
//模态框button按钮个数和文案修改

let buttons = ref<dataSourceType[]>([]);

// 保存版本
const saveVersion = () => {
  request
    .fetchContentVersionSave({ contentId: props.contentId })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        fetchContentVersionList();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
// 修改备注
const remarkChange = (item: any) => {
  request
    .fetchContentVersionRemark({ id: item.id, remark: item.remark })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        fetchContentVersionList();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
// 删除版本
const fetchContentVersionDelete = (data: any) => {
  request
    .fetchContentVersionDelete({ ids: data })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        fetchContentVersionList();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
// 回复版本
const fetchContentVersionRestore = (val: number) => {
  request
    .fetchContentVersionRestore({ id: val })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        fetchContentVersionList();
        emits('fetchContentVersionRestore')
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
// 查看详情
const detailRecords = (val: any) => {
  isVersionDetailVisible.value = true;
  versionId.value = val;
  // nextTick(() => {
  //   fetchContentVersionCompare(tagBaseTables.value.selectedRowKeys);
  // });
};
// 版本对比
const compareVersion = () => {
  isVersionComparisonVisible.value = true;
  VersionIds.value = tagBaseTables.value.selectedRowKeys;
  // nextTick(() => {
  //   fetchContentVersionCompare(tagBaseTables.value.selectedRowKeys);
  // });
};
const compareVersion1 = (val: any) => {
  isVersionComparisonVisible.value = true;
  VersionIds.value = val;
  // nextTick(() => {
  //   fetchContentVersionCompare(val);
  // });
};
// 版本对比
const fetchContentVersionCompare = (val: any) => {
  let data = request.fetchContentVersionCompare({
    contentId: props.contentId,
    sourceVersionId: val[0],
    targetVersionId: val[1],
  });
  compareData.value = data;
};
const handleOkModel = () => {
  isVersionComparisonVisible.value = false;
  isVersionDetailVisible.value = false;
  fetchContentVersionList();
};
// 操作记录
const operatingRecord = () => { };
// 内容版本
const versionRecord = () => { };
// 删除
const deleteRecord = () => { };
// 删除多个
const deleteSelectedAll = async (item: any) => {
  console.log(item, "iten");
  Modal.confirm({
    content: "您确定删除选中的内容？",
    centered: true,
    icon: createVNode("i", {
      class: "iconfont icon-warn warning_ICON",
    }),
    cancelText: "取消",
    okText: "确定",
    onOk: async () => {
      fetchContentVersionDelete(tagBaseTables.value.selectedRowKeys);
    },
    onCancel() { },
  });
};



const handleOk = () => {
  emits("handleOk");
};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};
const fetchContentVersionList = async () => {
  let data = await request.fetchContentVersionList({ contentId: props.contentId });
  resData.value = data;
};
onMounted(async () => {
  fetchContentVersionList();
});
</script>

<style lang="less" scoped>
.version_model {
  height: 100%;
  overflow: hidden;

  .version_modelBox {

    // height: 493px;
    // overflow-y: auto;
    // position: relative;
    .btnBox {
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      i {
        margin-left: 8px;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }

  .addButton {
    display: flex;
    align-items: center;

    .iconadd {
      font-size: 24px;
      margin-right: 4px;
    }
  }

  .eidtRecords {
    margin-right: 16px;
  }

  .eidtRecords:last-child {
    margin-right: 0;
  }
}
</style>
<style lang="less">
.version_model {
  .paginationSetting {
    display: none !important;
  }


}

.tableInput {
  border-width: 0px;
  box-sizing: border-box;
  background-color: transparent;
}

.tableInput:focus,
.tableInput:hover {
  border-width: 1px;
  background-color: transparent;
}
</style>
